<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>购物车</title>
  {css href="/static/layout/css/style.css" }
  {css href="/static/layout/css/style-responsive.css" }
  {css href="/static/css/toastr.min.css"}
  <link rel="stylesheet" href="/static/css/index.css">
  <link rel="stylesheet" href="/static/css/buycar.css">
  <style>
     .buycar{width:1090px;margin:0 auto;margin-top:20px;position:relative;}
     #chese{background-color:red;display:inline-block;width:100px;height:30px;color:white;font-size:14px;border-radius:10px;text-align:center;line-height:30px;}
  </style>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  
  
</head>

<body class="horizontal-menu-page" style="background: #fff;">

<section>

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{:url('index/Index/index')}">
                    <img src="/static/index/images/logo.png" height="42px">
                </a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{:url('index/Index/index')}">首页</a></li>
                    <li><a href="{:url('index/Category/index')}?where=0">分类 </a></li>
                    <li><a href="{:url('index/Category/rank',['id'=>0])}">榜单 </a></li>
                    <li><a href="{:url('index/Register/registerauthor')}">成为作者</a></li>
                    <li><a href="{:url('index/Author/index')}">作者专区</a></li>
                </ul>

                  <ul class="nav navbar-nav navbar-right" style="margin-right:100px;">
                    <li>
                        <form class="navbar-form navbar-left" role="search" action="{:url('index/Index/find')}" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search" name="search">&nbsp;
                                <button class="btn btn-info ">搜索</button>
                            </div>
                        </form>
                    </li>

                    {if ( empty($Think.session.user) && empty($Think.cookie.loginid) )}
                    <li class="dropdown">
                        <a href="{:url('index/Register/index')}">注册</a> <b lass="caret"></b>
                    </li>
                    <li><a type="button" data-toggle="modal" data-target=".bs-example-modal-sm">登陆</a>

                        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
                             aria-labelledby="mySmallModalLabel">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content" style="margin-top: 250px;">
                                    <form action="{:url('index/Login/login')}" method="post">
                                        <!-- <img src="" alt=""> -->
                                        <input type="text" class="form-control" name="tel" autocomplete="off" maxlength="11" placeholder="账号">
                                        <input type="password" class="form-control" name="pass" autocomplete="off" placeholder="密码">
                                        <div class="form-group">
                                            <div class="col-sm-10">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="checkbox">记住密码
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-default btn-lg btn-block">登陆</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </li>
                    {else/}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          {if empty($Think.session.user.icon) && empty($Think.cookie.loginicon)}
                             <img src="/static/images/details/10.jpg">
                          {else/} 
                          <img src="{$Think.session.user? $Think.session.user.icon : $Think.cookie.loginicon}">
                          {/if}
                            {$Think.session.user? $Think.session.user.name : $Think.cookie.loginname} 
                            <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="{:url('index/BookShelf/index')}">我的书架
                            <li><a href="{:url('index/Personal/index',['id'=>$Think.session.user? $Think.session.user.id : $Think.cookie.loginid])}">我的账号</a></li>
                            <li><a href="{:url('index/Login/logout')}">注销</a></li>
                        </ul>
                    </li>
                    {/if}
                    <li><a href="{:url('index/BuyCar/read',['id'=>$Think.session.user? $Think.session.user.id : $Think.cookie.loginid])}">购物车({$count}) </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="buycar">
        <div class="top">
           <span>电子书信息</span>
           <span>电子书价格(元)</span>
           <span>操作</span>
        </div>
        {if empty($list)}
        <div style="width:1090px;height:402px;border:1px solid #999;margin:0 auto;margin-top:20px;">
          <img src="/static/images/details/buycar.png" width="800px" height="400px">
          <a href="{:url('index/index/index')}" id="chese">前去挑选图书</a>
        </div>
        {else/}
        {if !empty($vip)}
        <span style="display:block;color:red;width:1090px;height:44px;text-align:center;line-height:44px;">尊贵的新芽会员，已享受7折优惠</span>
        {/if}
        {foreach $list as $vo}
        <div class="middle" style="margin-top:10px;">
          <label><input type="checkbox" class="check" data-id="{$vo.id}"></label>
          <a href="{:url('index/Details/read',['id'=>$vo.did])}"><img src="{$vo.face}" alt="{$vo.name}" style="width:80px;height:104px;"></a>
          <a href="{:url('index/Details/read',['id'=>$vo.did])}"><span class="name">{$vo.name}</span></a>
          <span class="author">作者：{$vo.author}</span>
          <span class="price" data-id="{$vo.id}">{$vo.pay_money}</span>
          <button class="delete" data-id="{$vo.id}">删除</button>
        </div>
        {/foreach}
        {/if}
        <div class="bottom">
          <span class="choice">全选</span>
          <span class="cancel">取消全选</span>
          <span class="deletebook">删除选中图书</span>
          <span class="choicebook">已选<b class="many">0</b>本电子书</span>
          <div class="rightcount">
            <span class="count">合计：&yen;<b class="money">0.00</b></span>
              <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"  data-target="#myModal">去支付</button>
          </div>
        </div>

    </div>

    <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" style="margin-right:415px;">
            <div class="modal-content"style="width:800px;">
              <div class="modal-header" style="background-color:#FAFAF7;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="color:#333">购买图书</h4>
                <h5 class="modal-title" id="myModalLabel" style="float:right;color:#333;margin-top:-25px;margin-right:20px;">账号：<span style="color:#58bd5a;">{$Request.session.user.name}</span></h5>

              </div>
              <div class="modal-body">
                 <div class="countnumber">图书共：<span style="color:#333;" class="allbook">0</span>本</div>
                <div class="countnumber">图书总额：<span style="color:#333;" class="result">0.00</span>元</div>
                <div class="countnumber">应付金额：<span style="font-size:20px;color:#f60;" class="result">0.00</span>元</div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary gotopay">立即支付</button>
              </div>
            </div>
          </div>
        </div>
  </div>
     <!-- Modal -->
    <!--footer section start-->
    <!-- <footer class="sticky-footer"> -->
    <footer style="border:0;font-size: 16px;">
        <div class="row">
            <div class="ft-box center">
                <div class="col-md-3">
                    <div class="ft-icon ft-icon1"></div>
                    <p class="mgt10">正版电子书</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon2"></div>
                    <p class="mgt10">多平台畅读</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon3"></div>
                    <p class="mgt10">海量图书资源</p>
                </div>
                <div class="col-md-3">
                    <div class="ft-icon ft-icon4"></div>
                    <p class="mgt10">优质阅读体验</p>
                </div>
                <div style="clear:both"></div>
            </div>
                

            <div class="ft-link">
                <dl class="col-md-4">
                    <dt>帮助</dt>
                    <dd><a href="">如何购买图书</a></dd>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">支付方式</a></dd>
                </dl>
                 <dl class="col-md-4">
                    <dt>平台入驻</dt>
                    <dd><a href="">机构专区</a></dd>
                    <dd><a href="">个人作者专区</a></dd>
                </dl>
                 <dl class="col-md-4">
                    <dt>投诉与建议</dt>
                    <dd><a href="">问题反馈</a></dd>
                </dl>
            </div>

        </div>
    </footer>
    <!--footer section end-->

</section>

<!-- Placed js at the end of the document so the pages load faster -->
{js href="/static/layout/js/jquery-1.10.2.min.js" }
{js href="/static/layout/js/jquery-ui-1.9.2.custom.min.js" }
{js href="/static/layout/js/jquery-migrate-1.2.1.min.js" }
{js href="/static/layout/js/bootstrap.min.js" }
{js href="/static/layout/js/modernizr.min.js" }
{js href="/static/layout/js/jquery.nicescroll.js" }
{js href="/static/js/toastr.min.js"}
<!--common scripts for all pages-->
{js href="/static/layout/js/scripts.js"}
<script>
    
    $(function () {
        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-top-right" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };
        
        $(".price").each(function() { 
            var vipmoney = parseFloat($(this).html());
            $(this).html(vipmoney.toFixed(2));
         });
        
        $('.btn-lg').click(function(){
            var checkedNum = $("input[class='check']:checked").length;
             if(checkedNum == 0) { 
                $(this).removeAttr('data-toggle');
                toastr.error("请选择你的图书！", 'FBI WARING:'); 
             }else{
              $(this).attr("data-toggle","modal");
             }
        });

        // 触发删除订单
        $('.delete').click(function () {
            var oid = $(this).attr('data-id');
            if (confirm('你确定要[删除]吗?!')) {
                var obj = $(this).parent('div');
                DeleteOrder(oid,obj); // 指定删除信息操作
            }
            
        });
        
        //删除选中的
        $('.deletebook').click(function () {
           var checkedNum = $("input[class='check']:checked").length;
           if(checkedNum == 0) { 
                    toastr.error("请选择至少一项！", 'FBI WARING:'); 
                    return; 
               } 
         // 批量选择 
         if(confirm("确定要删除所选项目？")) { 
         var checkedList = [];
         var divList = new Array(); 
         $("input[class='check']:checked").each(function() { 
            checkedList.push($(this).attr('data-id'));
            divList.push($(this).parents('.middle'));
         });
         DeleteSelect(checkedList,divList);
       }
     });
            

        var num = 0;
        var nid = [];
        $('.check').click(function () { 
            if($(this).is(":checked") == false){
              $(this).parents('.middle').css({backgroundColor:''});
              var checkedNum = $("input[class='check']:checked").length;
              $('.many').html(checkedNum);
              $('.money').html(parseFloat(0));
              $('.allbook').html(checkedNum);
              num -= parseFloat($(this).parent('label').nextAll('.price').html());
              $('.money').html(num.toFixed(2));
              $('.result').html(num.toFixed(2));
              nid.splice(0,nid.length)
            }else{
              $(this).parents('.middle').css({backgroundColor:'#FFFAF0'});
              var checkedNum = $("input[class='check']:checked").length;
              $('.many').html(checkedNum);
              $('.allbook').html(checkedNum);
              num += parseFloat($(this).parent('label').nextAll('.price').html());
              $('.money').html(num.toFixed(2));
              $('.result').html(num.toFixed(2));
            }
            
            $("input[class='check']:checked").each(function() { 
              nid.push($(this).attr('data-id'));
              });
            $('.gotopay').click(function(){
             gotopay(nid); 
           });

            
        });

        $('.choice').click(function(){
           num = 0;
           $(".check").each(function () {
                    $(this).prop('checked',true);
                    $(this).parents('.middle').css({backgroundColor:'#FFFAF0'});
                    var checkedNum = $("input[class='check']:checked").length;
                    $('.many').html(checkedNum);
                    $('.allbook').html(checkedNum);
                    num += parseFloat($(this).parent('label').nextAll('.price').html());
                    $('.money').html(num.toFixed(2));
                    $('.result').html(num.toFixed(2));
              });

            $("input[class='check']:checked").each(function() { 
              nid.push($(this).attr('data-id'));
              });
            $('.gotopay').click(function(){
             gotopay(nid); 
           });
            

        });

      $('.cancel').click(function(){
        $(".check").each(function () {
        $(this).prop('checked',false);
        $(this).parents('.middle').css({backgroundColor:''});
        $('.many').html(0);
        $('.allbook').html(0);
        num = 0;
        $('.money').html(num.toFixed(2));
        $('.result').html(num.toFixed(2));
      });

          $("input[class='check']:checked").each(function() { 
            nid.push($(this).attr('data-id'));
            });
          $('.gotopay').click(function(){
             gotopay(nid); 
            });

      });
      
    });//总括号

    function DeleteOrder(oid,obj) {
        $.ajax({
            type: 'delete',
            url: '/buycar/'+oid,
            dataType:'json',
            success: function (data) {
                if (data.status) {
                    toastr.success(data.info);
                    // 将该条目删除掉
                    obj.remove();
                } else {
                    toastr.error(data.info, 'FBI WARING:');
                }
            },
            error: function () {
                alert('AJAX操作失败');
            }
        });
    }
    

    //删除选中的
    function DeleteSelect(aid,obj) {
        $.ajax({ 
                  data: {'id':aid},
                  type: "POST",  
                  url: "/deletemore.html",
                  dataType:'json',  
                  success: function(result) { 
                    if (result.status) {
                    toastr.success(result.info);
                    // 将该条目删除掉
                    window.location.reload();
                        } else {
                     toastr.error(result.info, 'FBI WARING:');
                     }
                  },
                  error: function () {
                     alert('AJAX操作失败');
                   } 
               }); 
      }


      function gotopay(nid) {
        $.ajax({ 
                  data: {'id':nid},
                  type: "POST",  
                  url: "/gopay.html",
                  dataType:'json',  
                  success: function(result) { 
                    if (result.status) {
                    toastr.success(result.info);
                    window.location.reload();
                        } else {
                     toastr.error(result.info, 'FBI WARING:');
                     }
                  },
                  error: function () {
                    
                   } 
               }); 
      }
     
 </script>
</body>
</html>
